<template>
  <div class="container">
    <top-nav :toLastPath="true">修改密码</top-nav>
    <ul>
      <li>
        <span>账号</span>
        <input type="text" name="name" placeholder="请输入账号" v-model="name">
      </li>
      <li>
        <span>原密码</span>
        <input type="text" name="name" placeholder="请输入原密码" v-model="oldPassword">
      </li>
      <li>
        <span>新密码</span>
        <input type="tel" name="name" placeholder="请输入新密码" v-model="password">
      </li>
      <li>
        <span>确定密码</span>
        <input type="tel" name="name" placeholder="请输入确认密码" v-model="againPassword">
      </li>
    </ul>
    <div class="tip">密码必须是8-16位的数字、字母组合，不能用空格,密码长度为6-20字符</div>
    <div class="tip_btn" @click="forget">忘记原密码？</div>

    <div class="commit" @click="commit">
      <div>保存</div>
    </div>
  </div>
</template>

<script>
import topNav from '@/components/topNav'
import { Toast } from 'vant';
export default {
  data () {
    return {
      phone:"",
      phone_format:"",
      name:"",
      oldPassword:"",
      password:"",
      againPassword:"",
    }
  },

  computed: {

  },
  components:{
    topNav
  },
  methods: {
    async forget(){
      let res=await this.$currency.showModal('',`你的账号是绑定你的手号码，可以通过短信验证码重置密码，是否发送验证码到${this.phone_format}?`)
      
      if(res){
        let res=await this.$axios.post('/auth/sendVerificationCode',{phone:this.phone})
        this.$router.push({name:'verification',params:{phone:this.phone}})
        // this.$router.push({path:'/me/security/verification',params:{phone:this.phone}})
      }
    },
    async getUserInfo(){
      var userToken=window.localStorage.getItem('userToken')
      let res=await this.$axios('/ucenter/getUserInfo',{params:{user_token:userToken}})
      this.phone=res.data.data.phone
      this.phone_format=res.data.data.phone.substr(0,3)+"****"+res.data.data.phone.substr(7)
    },
    async commit(){
      let pattern=/\s+/;
      var userToken=window.localStorage.getItem('userToken')

        if(this.name==''){
          Toast('账号不能为空')
          return
        }else if(this.oldPassword==''){
          Toast('原密码不能为空')
          return
        }else if(this.password==''){
          Toast('新密码不能为空')
          return
        }else if(pattern.test(this.password)){
          Toast('新密码不能用空格')
          return
        }
        else if(this.againPassword==''){
          Toast('确认密码不能为空')
          return
        }
        else if(this.password!=this.againPassword){
          Toast('2次密码不相同')
          return
        }
        let res=await this.$axios.post('/auth/changePassword',{set_type:"0",user_token:userToken,old_password:this.oldPassword,new_password:this.password})
        console.log(res)
        if(res.data.level=='success'){
        this.$currency.showToast('设置成功',1500,'success')
        setTimeout(()=>{
          this.$router.push('/pages/me/main')
        },3500)
       }else{
         this.$currency.showToast(res.data.message,1500,"fail")
       }
        
      
    }
  },
  activated(){
    this.getUserInfo()
  }
}
</script>

<style scoped>
.container{background-color: #F8F8FB;height: 100%;}
.container ul{width: 100%;margin-top:45px;}
.container ul li{width: 100%;height: 60px;display: flex;justify-content: row;background-color: #fff;margin-bottom: 2px;line-height: 60px;}
.container ul li span{width: 100px;font-size: 17px;color: #000000;letter-spacing: 30px;padding-left: 25px;}
.container ul li:nth-of-type(2) span{letter-spacing: 8px;}
.container ul li:nth-of-type(3) span{letter-spacing: 8px;}
.container ul li:nth-of-type(4) span{letter-spacing: 0px;}
.container ul li input{width: 265px;border: 0px;font-size: 15px;color: #B2B2B9;line-height: 60px;height: 60px;}

.tip,.tip_btn{width: 335px;padding: 10px 20px;font-size: 15px;color: #8E8E93;}
.tip_btn{color: #38B4DB;}
.commit{position: fixed;bottom: 0px; left: 0px;width: 100%;height: 73px;background-color: #F8F8FB;}
.commit div{width: 345px;height: 48px;text-align: center;line-height: 48px;background-image: linear-gradient(-135deg, #57D1E2 0%, #37AED6 100%);border-radius: 8px;margin: 12.5px auto;color: #fff;font-size: 19px;}
</style>
